<template>
    <div class="contion">
        <div class="title">
            <el-icon @click="back"><ArrowLeftBold /></el-icon>
            <b style="margin-left:130px">商品详情</b>
        </div>
        <div class="detail">
            <ul>
                <li><img :src="detalist.image" style="width:300px; height:400px;"></li>
                <li>{{ detalist.name }}</li>
                <li>￥{{ detalist.price }}元</li>
                <li>销量：{{ detalist.sales }}</li>
                <li>好评：{{ detalist.good_review }}</li>
                <li>中评：{{ detalist.mixed_review }}</li>
                <li>差评：{{ detalist.bad_review }}</li>
            </ul>
        </div>
        <span style="margin-left:40px;font-size:20px"><b>推荐穿搭套装</b></span>
        <div class="detail_1" v-for="(i,j) in recommend" :key="j">
            <span><b>套装组合价：￥{{ i.price }}元</b></span>
            <div style="display: flex;flex-direction:row;">
                <div v-for="(m,n) in i.goods_names" :key="n" class="detail_2">
                    <img :src="m.image" style="width:100px; height:100px;"></img>
                    <span>{{ m.name }}</span>
                    <span>￥{{ m.price }}元</span>
                </div>
            </div>
        </div>
        <span class="message"><b>评价列表</b></span>
        <div v-for="(i,j) in meslist" :key="j" class="message_1">
            <span><b>{{ i.username }}:{{ i.content }}</b></span>
        </div>
        <p style="margin-left:40px;">评价：
            <el-input v-model="content" placeholder="请输入您的评价" style="width: 240px"/>
            <el-button @click="getmes">发送</el-button>
        </p>
        
        <div></div>
    </div>
</template>

<script setup>
import { h, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();

const back = () =>{
   router.back();
}

let detalist = ref([]);

const getdeta = () =>{
    http.get(`/goods/${route.query.id}`).then(res=>{
        // console.log(res.data);
        detalist.value=res.data
    })
}

let recommend = ref([])
const getrecom = () =>{
    http.get(`/recom/?good=${route.query.id}`).then(res=>{
        // console.log(res.data)
        recommend.value = res.data
    })
}


const user = localStorage.getItem('userid')
const goods = route.query.id
const content = ref('')
const getmes = () =>{
    http.post("/mess/",{user,goods,content:content.value}).then(res=>{
        console.log(res.data)
        if(res.status == 201){
            ElMessage.success(res.data.message)
            getmeslist()
        }
        else{
            ElMessage.error(res.data.errors)
        }
    })
}

let meslist = ref({})

const getmeslist = () =>{
    http.get(`/mess/?goods=${route.query.id}`).then(res=>{
        meslist.value=res.data
    })
}

onMounted(() => {
    getdeta()
    getrecom()
    getmeslist()
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    vertical-align: middle;
}

.title{
    width: 100%;
    height: 40px;
    margin-left: 20px;
    background-color: #fff;
    font-size: 30px;
    position: fixed;
    z-index: 100; /* 确保标签栏在内容之上 */
}

.detail{
    margin-top: 50px;
    margin-left: 60px;
    margin-bottom: 50px;
}

.detail_1{
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    margin-top: 10px;
}

.detail_2{
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.message{
    margin-top: 50px;
    margin-left:40px;
    font-size:20px;
}

.message_1{
    margin-left:40px;
}
</style>